@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(waves) {
  margin-top: -11vh;
  position: relative;
  width: 100%;
  height: 12vh;
  min-height: 3.125rem;
  max-height: 9.375rem;
  z-index: 10;

  .parallax {
    .use {
      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

      &:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
        fill: getCssVar("lower-color-6");

        :is(.dark .dark\:fill-black) {
          fill: #000 !important;
        }
      }

      &:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
        fill: getCssVar("lower-color-5");

        :is(.dark .dark\:fill-black) {
          fill: #000;
        }
      }

      &:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
        fill: getCssVar("lower-color-4");
      }

      &:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
        fill: getCssVar("lower-color-3");
      }

      /* 波浪动画 */
      @keyframes move-forever {
        0% {
          transform: translate3d(-90px, 0, 0);
        }

        100% {
          transform: translate3d(85px, 0, 0);
        }
      }
    }
  }
}
